<template>
  <div class="article">
    新闻列表
    <div class="article-header">
      <div class="left">
        <el-input
          style="width: 300px"
          v-model="artcieTitle"
          placeholder="请输入内容"
          clearable
          @change="titleChange"
        ></el-input>

        <el-date-picker
          style="width: 300px; margin-left: 30px"
          v-model="artcieTime"
          type="year"
          placeholder="选择年"
          format="yyyy"
          value-format="yyyy"
          @change="onPickChange"
        >
        </el-date-picker>
      </div>

      <div class="header" @click="addMet">新增</div>
    </div>

    <a-table
      :columns="columns"
      :data-source="dataSource"
      @change="handleTableChange"
      :pagination="pagination"
      :rowKey="(dataSource) => dataSource.newId"
    >
      <template slot="name" slot-scope="scope">
        <div class="table-title">
          {{ scope.newTitle }}
        </div>
      </template>

      <template slot="time" slot-scope="scope">
        <div class="table-title">
          {{ scope.createTime }}
        </div>
      </template>

      <template slot="operation" slot-scope="scope">
        <div class="table-display">
          <div class="display-list" @click="compileMet(0, scope)">编辑</div>
          <div class="display-list" @click="compileMet(1, scope)">删除</div>
        </div>
      </template>
    </a-table>

    <!--新增-->
    <div class="add" ref="add">
      <a-modal
        :getContainer="() => $refs.add"
        v-model="addVisible"
        :title="addIndex == 0 ? '新增' : '编辑'"
        width="50%"
      >
        <div class="add-block">
          <div style="display: flex; align-items: center">
            <div style="width: 50px">标题：</div>
            <a-input v-model="form.name" />
          </div>

          <div style="display: flex; align-items: center; margin-top: 10px">
            <div style="width: 50px">时间：</div>
            <a-date-picker
              v-if="addIndex == 0"
              @change="onChange"
              placeholder="Select month"
              valueFormat="YYYY-MM-DD"
            />
            <a-date-picker
              v-else
              @change="onChange"
              placeholder="Select month"
              v-model="form.time"
              valueFormat="YYYY-MM-DD"
            />
          </div>

          <div style="display: flex; align-items: center; margin-top: 10px">
            <div style="width: 50px">描述：</div>
            <a-input v-model="form.desc" />
          </div>

          <div style="display: flex; align-items: baseline; margin-top: 10px">
            <div style="width: 50px">内容：</div>

            <quillEditor
              style="width: 100%; height: 250px"
              v-model="form.text"
              ref="quillEditor"
            ></quillEditor>

            <!-- <vue-editor
              style="width: 100%; height: 250px"
              v-model="form.text"
              @image-added="handleImageAdded"
              useCustomImageHandler
            ></vue-editor> -->
          </div>
        </div>
        <div class="block-display">
          <div
            class="block-display-list"
            v-for="(item, index) in 2"
            :key="index"
            @click="buttonMet(index)"
          >
            {{ index == 0 ? "取消" : "确定" }}
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script>
// import { VueEditor } from "vue2-editor";

import { quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
import axios from "axios";

import moment from "moment";

import {
  managerNewGet,
  managerNewIdGet,
  managerNewPost,
  managerNewDelete,
} from "../../api/common";

export default {
  components: {
    quillEditor,
  },
  data() {
    this.dateFormat = "YYYY-MM-DD";
    return {
      addVisible: false,
      addIndex: 0,
      //----------
      artcieTitle: "",
      artcieTime: "",
      // 数据
      columns: [
        {
          title: "标题",
          scopedSlots: { customRender: "name" },
        },
        {
          title: "时间",
          scopedSlots: { customRender: "time" },
          width: 300,
        },
        {
          title: "操作",
          scopedSlots: { customRender: "operation" },
          width: 300,
        },
      ],
      dataSource: [],
      page: 1,
      limit: 10,

      pagination: {
        total: 10,
        current: 1,
        pageSize: 10,
        pageSizeOptions: ["10", "20", "50", "100"],
        showTotal: (total) => `总共 ${total} 条`,
      },
      form: {
        id: "",
        name: "",
        time: undefined,
        text: "",
        desc: "",
      },
      //上传图片
    };
  },

  created() {
    // 请求文章列表
    this.articleMet();
  },
  methods: {
    moment,
    // 请求文章列表
    articleMet() {
      let params = {
        pageSize: this.limit,
        pageNo: this.page,
        //-------
        year: this.artcieTime,
        newTitle: this.artcieTitle,
      };

      managerNewGet(params).then((res) => {
        if (res.resultStatus == true) {
          this.dataSource = res.resultData.newList;
          this.pagination.total = res.resultData.totalNum;
        }
      });
    },

    // 用户点击新增
    addMet() {
      this.addIndex = 0;
      this.form.id = "";
      this.form.name = "";
      this.form.time = undefined;
      this.form.text = "";
      this.form.desc = "";

      this.addVisible = true;
    },
    // 操作区域
    compileMet(index, item) {
      if (index == 0) {
        this.addIndex = 1;

        this.form.id = "";
        this.form.name = "";
        this.form.time = undefined;
        this.form.text = "";
        this.form.pdf = "";
        this.essayDetailGetMet(item.newId);
      } else if (index == 1) {
        this.deleteMet(item.newId);
      } else {
      }
    },

    // 详情
    essayDetailGetMet(id) {
      let params = id;

      managerNewIdGet(params).then((res) => {
        if (res.resultStatus == true) {
          this.form.id = res.resultData.newId;
          this.form.name = res.resultData.newTitle;
          this.form.time = res.resultData.createTime;
          this.form.text = res.resultData.newContent;
          this.form.desc = res.resultData.newDesc;

          this.addVisible = true;
        }
      });
    },
    // 弹出框 时间
    onChange(date, dateString) {
      this.form.time = dateString;
    },

    //弹出框 确认
    buttonMet(index) {
      if (index == 0) {
        this.addIndex = 0;
        this.form.name = "";
        this.form.time = undefined;
        this.form.text = "";
        this.addVisible = false;
      } else {
        this.essayPostMet(0);
      }
    },

    // 点击确定
    essayPostMet() {
      let params = {
        newId: this.form.id,
        newTitle: this.form.name,
        newContent: this.form.text,
        newDesc: this.form.desc,
      };

      managerNewPost(params).then((res) => {
        this.$message.success(
          `${this.addIndex == 0 ? "新增成功！" : "编辑成功！"}`
        );
        this.addVisible = false;
        this.articleMet();
      });
    },

    // 删除
    deleteMet(id) {
      const params = id;

      managerNewDelete(params).then((res) => {
        if (res.resultStatus === true) {
          this.$message.success("删除成功");
          this.articleMet();
        }
      });
    },

    // 选择图片 富文本上传图片
    handleImageAdded(file, Editor, cursorLocation, resetUploader) {
      let formData = new FormData();
      formData.append("file", file);

      axios({
        url: `https://anbio.xmw1688.com/common/upload`,
        method: "POST",
        data: formData,
      })
        .then((res) => {
          //这两行是关键代码了。在鼠标位置插入图片，数据存的是url
          let url = "https://oss-cdn.anbio.com" + res.data.resultData;

          Editor.insertEmbed(cursorLocation, "image", url);
          resetUploader();
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.page = pagination.current;
      this.limit = pagination.pageSize;

      this.articleMet();
    },

    //-----------------
    onPickChange(e) {
      this.page = 1
      this.limit = 10

      this.articleMet()
    },
    titleChange() {
       this.page = 1
      this.limit = 10

      this.articleMet()
    }
  },
};
</script>

<style lang="less" scoped>
.article {
  .article-header {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .header {
      width: 100px;
      height: 35px;
      border: 1px solid;
      margin-right: 35px;
      cursor: pointer;
      background: #775dc0;
      border-radius: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-weight: 500;
      font-size: 14px;
    }
  }

  .table-title {
    cursor: pointer;
  }

  .table-display {
    display: flex;

    .display-list {
      margin-right: 30px;
      cursor: pointer;
    }
  }

  .add {
    /deep/ .ant-modal-title {
      text-align: center;
      font-weight: bold;
      font-size: 15px;
      color: #fff;
    }

    /deep/ .ant-modal-header {
      padding: 0;
      height: 40px;
      background: #a6a6a6;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    /deep/ .ant-modal-close-x {
      width: 40px;
      height: 40px;
      line-height: 40px;
      font-size: 14px;
      margin-right: 10px;
      color: #fff;
    }

    /deep/ .ant-modal-body {
      background: #fff;
    }

    /deep/ .ant-modal-footer {
      display: none;
    }

    .add-block {
      margin: 0 auto;
      height: 100%;

      /deep/ .ant-calendar-picker {
        width: 100%;
      }
    }

    .block-display {
      display: flex;
      justify-content: space-around;
      margin-top: 100px;

      .block-display-list {
        width: 100px;
        height: 35px;
        border: 1px solid;
        margin-right: 25px;
        cursor: pointer;
        background: #775dc0;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-weight: 500;
        font-size: 14px;
      }

      .block-display-list:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>
